// hooks 封装逻辑，提供响应式数据
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'
import { onUnmounted, ref } from 'vue'
export const useLazyData = (apiFn) => {
  const result = ref([])
  const target = ref(null)
  // 懒加载
  // stop             用于停止检测函数
  // target           被检测的元素
  // isIntersecting   布尔值,元素是否可见
  const { stop } = useIntersectionObserver(
    target,
    // 如果元素可以，发送请求获取数据，并停止检测避免重复发送请求
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        // console.log('数据加载')
        // 调用API获取数据
        apiFn && apiFn().then((res) => {
          result.value = res.result
        })
        // console.log(result)
        stop()
      }
    },
    // 🔔优化： 0 元素刚进入可视区触发，1 表示元素完整进入可视区才触发
    { threshold: 0 }
  )
  return { result, target }
}

/**
 * 支付倒计时函数
 */
export const usePayTime = () => {
  // 倒计时逻辑
  const time = ref(0)
  const timeText = ref('')
  const { pause, resume } = useIntervalFn(() => {
    time.value--
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    if (time.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })
  onUnmounted(() => {
    pause()
  })

  // 开启定时器 countdown 倒计时时间
  const start = (countdown) => {
    time.value = countdown
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    resume()
  }

  return {
    start,
    timeText
  }
}
